Fix playground Share button showing "Copied!" before clipboard copy completes#21942
Conversation
|
Ohh, this is what was happening! I noticed this multiple times but didn't dig into it. Thanks for opening a fix for this issue, it would be useful to add a short video to demo this in the PR description when you make it ready for review. |
MichaReiser
left a comment
MichaReiser
left a comment
There was a problem hiding this comment.
Thank you.
I think we should move the error handling into ShareButton to avoid async race conditions or stale states if sharing failed.
| disabled={copied} | ||
| onClick={() => { | ||
| onClick={async () => { | ||
| await onShare(); |
There was a problem hiding this comment.
I think we want to distinguish between three states
initial: Button is clickable, label isSharecopying: Button is disabled, label isSharecopied: Button is disabled, label isCopied
We should ensure that we reset the state to Share if onShare throws (maybe by moving the try catch handling from onShare to here, we could even consider having a 4th state failed)
Co-authored-by: Micha Reiser <micha@reiser.io>
|
Thank you for the review @MichaReiser ! I’ve addressed your feedback:
Please take another look when you have a chance. |
4 participants
Summary
Fix the playground Share button to only show "Copied!" after the clipboard copy operation actually completes.
Previously, the Share button would immediately show "Copied!" when clicked, before the async
persistandclipboard.writeTextoperations finished. This caused a confusing UX where users would see "Copied!" but if they tabbed away quickly, the copy would fail with aNotAllowedError: Document is not focusederror.Now the button waits for
onShare()to complete before updating the UI state.Fixes #21691
Test Plan
Tested locally with
npm start --workspace ruff-playgroundDemo